<template>
  <div class="block">
    <div style="margin-top: 10px; margin-left: 10px;">
      <el-date-picker
        v-model="timeRanges"
        type="datetimerange"
        start-placeholder="请选择开始日期时间"
        end-placeholder="请选择结束日期时间"
        :picker-options="{
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }"
      ></el-date-picker>
      <el-select v-model="eventId" placeholder="请选择事件类型" style="width: 400px">
        <el-option v-for="item in eventNames" :key="item.id" :label="item.chinese" :value="item.id"></el-option>
      </el-select>
      <el-button type="success" @click="searchEvents">查询</el-button>
    </div>

    <div v-if="1 === this.queryData.eventId">
      <el-table
        v-loading="loading"
        :data="globalEventTableData"
        :default-sort="{ prop: 'appearTime', order: 'descending' }"
        style="width: 100%"
        ref="refsTable"
        :height="tableHeight"
      >
        <el-table-column
          prop="appearTime"
          align="center"
          width="180"
          label="发生时间"
          :sortable="true"
        />
        <el-table-column prop="deviceId" align="center" width="180" label="设备ID" />
        <el-table-column
          prop="deviceType"
          align="center"
          width="180"
          label="设备类型"
          column-key="deviceType"
        />
        <el-table-column prop="descrption" align="center" label="事件描述" />
      </el-table>
    </div>

    <div v-if="2 === this.queryData.eventId">
      <el-table
        v-loading="loading"
        :data="singleEventTableData"
        :default-sort="{ prop: 'appearTime', order: 'descending' }"
        style="width: 100%"
        ref="refsTable"
        :height="tableHeight"
      >
        <el-table-column
          prop="appearTime"
          align="center"
          label="发生时间"
          width="180"
          :sortable="true"
        />
        <el-table-column prop="deviceId" align="center" width="180" label="设备ID" />
        <el-table-column
          prop="deviceType"
          align="center"
          width="180"
          label="设备类型"
          column-key="deviceType"
        />
        <el-table-column prop="eventType" align="center" label="事件类型" />
        <el-table-column prop="eventReason" align="center" label="事件原因" />
      </el-table>
    </div>

    <div v-if="3 === this.queryData.eventId">
      <el-table
        v-loading="loading"
        :data="singleEventTableData"
        :default-sort="{ prop: 'appearTime', order: 'descending' }"
        style="width: 100%"
        ref="refsTable"
        :height="tableHeight"
      >
        <el-table-column
          prop="appearTime"
          align="center"
          label="发生时间"
          width="180"
          :sortable="true"
        />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column
          prop="deviceType"
          align="center"
          width="180"
          label="设备类型"
          column-key="deviceType"
        />
        <el-table-column prop="eventType" align="center" label="事件类型" />
        <el-table-column prop="eventReason" align="center" label="事件原因" />
      </el-table>
    </div>

    <div v-if="4 === this.queryData.eventId">
      <el-table
        v-loading="loading"
        :data="singleEventTableData"
        :default-sort="{ prop: 'appearTime', order: 'descending' }"
        style="width: 100%"
        ref="refsTable"
        :height="tableHeight"
      >
        <el-table-column
          prop="appearTime"
          align="center"
          label="发生时间"
          width="180"
          :sortable="true"
        />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column
          prop="deviceType"
          align="center"
          width="180"
          label="设备类型"
          column-key="deviceType"
        />
        <el-table-column prop="statusBeforeChanged" align="center" label="变更前定位状态" />
        <el-table-column prop="statusAfterChanged" align="center" label="变更后定位状态" />
      </el-table>
    </div>

    <div v-if="5 === this.queryData.eventId">
      <el-table
        v-loading="loading"
        :data="singleEventTableData"
        :default-sort="{ prop: 'appearTime', order: 'descending' }"
        style="width: 100%"
        ref="refsTable"
        :height="tableHeight"
      >
        <el-table-column
          prop="appearTime"
          align="center"
          label="发生时间"
          width="180"
          :sortable="true"
        />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column
          prop="deviceType"
          align="center"
          width="180"
          label="设备类型"
          column-key="deviceType"
        />
        <el-table-column prop="preWarnsNumBeforeChanged" align="center" label="变更前预警目标点个数" />
        <el-table-column prop="preWarnsNumAfterChanged" align="center" label="变更后预警目标点个数" />
      </el-table>
    </div>

    <div v-if="6 === this.queryData.eventId">
      <el-table
        v-loading="loading"
        :data="singleEventTableData"
        :default-sort="{ prop: 'appearTime', order: 'descending' }"
        style="width: 100%"
        ref="refsTable"
        :height="tableHeight"
      >
        <el-table-column
          prop="appearTime"
          align="center"
          label="发生时间"
          width="180"
          :sortable="true"
        />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column
          prop="deviceType"
          align="center"
          width="180"
          label="设备类型"
          column-key="deviceType"
        />
        <el-table-column prop="fence_id" align="center" label="围栏ID" />
        <el-table-column prop="fenceRelationBeforeChanged" align="center" label="变更前与围栏关系" />
        <el-table-column prop="fenceRelationAfterChanged" align="center" label="变更后与围栏关系" />
      </el-table>
    </div>
    <div v-if="7 === this.queryData.eventId||8 === this.queryData.eventId">
      <el-table
        v-loading="loading"
        :data="singleEventTableData"
        :default-sort="{ prop: 'appearTime', order: 'descending' }"
        style="width: 100%"
        ref="refsTable"
        :height="tableHeight"
      >
        <el-table-column
          prop="appearTime"
          align="center"
          label="发生时间"
          width="180"
          :sortable="true"
        />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column
          prop="deviceType"
          align="center"
          width="180"
          label="设备类型"
          column-key="deviceType"
        />
        <el-table-column prop="descrption" align="center" label="事件描述" />
      </el-table>
    </div>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pagesize"
      :page-sizes="[20, 40, 100, 200, 500]"
      :total="totalDataLength"
      :current-page="currentPage"
      align="center"
    ></el-pagination>
  </div>
</template>
<script>
import script from './script'
export default script
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
